<!-- DateTimePicker.vue -->
<template>
    <div>
      <label>选择日期和时间:</label>
      <vue-datepicker-next
        v-model="selectedDateTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm"
        :editable="true"
        :clearable="true"
        placeholder="请选择日期和时间"
      />
      <p>选择的日期和时间: {{ formattedDateTime }}</p>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import Datepicker from 'vue3-datepicker';
  import 'vue-datepicker-next/index.css';
  
  export default defineComponent({
    name: 'DateTimePicker',
    components: {
      Datepicker,
    },
    setup() {
      // 日期和时间的 state
      const selectedDateTime = ref<Date | null>(null);
  
      // 格式化日期和时间
      const formattedDateTime = computed(() => {
        return selectedDateTime.value
          ? new Intl.DateTimeFormat('zh-CN', {
              year: 'numeric',
              month: '2-digit',
              day: '2-digit',
              hour: '2-digit',
              minute: '2-digit',
            }).format(selectedDateTime.value)
          : '未选择';
      });
  
      return {
        selectedDateTime,
        formattedDateTime,
      };
    },
  });
  </script>
  
  <style scoped>
  /* 样式可以根据需求调整 */
  </style>
  